<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.set的使用</title>
</head>
<body>
<div id="app">
  <h3>人员信息</h3>
  <p>姓名：{{name}}</p>
  <p>年龄：{{age}}</p>
  <h3>朋友信息</h3>
  <button @click="addSex">为对象书信追加一个新的字段</button>
  <p>姓名：{{friends.fName}}</p>
  <p>年龄：{{friends.age}}</p>
  <p v-show="friends.sex">性别：{{friends.sex}}</p>

</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        name:"张三",
        age:18,
        friends:{
          fName:"李四",
          age:18
        }
      }
    },
    methods:{
      addSex() {
        // //第一种方式
        // Vue.set(vm.friends,'sex',"男")
        //第二种方式
        this.$set(this.friends, 'sex', "男")
      }

    }
  })
</script>
</body>
</html>
